<template>
	<view>
		<view class="wrap">
			<u-swiper indicator circular height="180" radius="0" :list="bannerList"></u-swiper>
		</view>
		<view class="white-border-box">
			<view class="apply-title">
				<view class="apply-line"></view>
				<view class="">加盟申请</view>
				<view class="apply-line"></view>
			</view>
			<view class="apply-action-box" >
				<view class="action-item" @click="shopMapClick">
					<image class="icon-image" src="../../../static/home/home_map.png" mode="scaleToFill"></image>
					<view class="">店铺地图</view>
				</view>
				<view class="action-item" @click="applyClick">
					<image class="icon-image" src="../../../static/home/home_apply.png" mode="scaleToFill"></image>
					<view class="">店铺申请</view>
				</view>
				<view class="action-item" @click="supportCityClick">
					<image class="icon-image" src="../../../static/home/home_city.png" mode="scaleToFill"></image>
					<view class="">支持城市</view>
				</view>
			</view>
		</view>
		<view class="white-border-box">
			<view class="apply-title">
				<view class="apply-line"></view>
				<view class="">加盟说明</view>
				<view class="apply-line"></view>
			</view>
			<view class="apply-content">
				加盟说明说明说明说明
				说明加盟说明说明说明说明
				说明加盟说明说明说明说明
				说明加盟说明说明说明说明
				说明加盟说明说明说明说明
				说明加盟说明说明说明说明
			</view>
		</view>
		<u-popup :show="show" @close="closePop" mode="top" @open="openPop">
			<view class="city-box">
				<text>出淤泥而不染，濯清涟而不妖</text>
			</view>
		</u-popup>
</view>
</template>

<script>
	import {
		getInfo
	} from '@/api/commen.js'
	export default {
		data() {
			return {
				show: false,
				bannerList: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				]
			};
		},
		onLoad() {
			let t = uni.getStorageSync('token');
			if(t != '' && t != null) {
				this.getUserData();
			}
		},
		onShow() {
			console.log(uni.getStorageSync('token'));
		},
		methods: {
			getUserData() {
				getInfo().then(res => {
					console.log(res);
				}).catch(error => {
					if (error.statusCode) { 
						uni.setStorageSync('token', '');
						uni.setStorageSync('userInfo', null);
						getApp().globalData.isLogin = false
						getApp().globalData.userInfo = null,
						uni.showToast({
							title: "登录状态已失效",
							icon: "none"
						})
						setTimeout(function() {
							uni.navigateTo({
								url: '/pages/loginPage/loginPage'
							})
						},1500)
					}
					console.log(error, "error ======== ");
				})
			},
			shopMapClick() {
				console.log("门店地图")
				uni.navigateTo({
					url: '/pages/tabs/home/shopMap'
				})
			},
			applyClick() {
				if (getApp().globalData.isLogin) {
					uni.navigateTo({
						url: '/pages/submitApply/submitApply'
					})
				}else {
					uni.navigateTo({
						url: '/pages/loginPage/loginPage'
					})
				}
			},
			supportCityClick() {
				console.log("支持城市")
				uni.navigateTo({
					url: '/pages/supportCity/supportCity'
				})
			},
			closePop(){
				this.show = false;
			},
			openPop() {
				
			}
		}
	}
</script>

<style lang="scss">
	
	.wrap {
		height: 180px;
		width: 100%;
	}
	.white-border-box {
		background-color: white;
		margin: 0px 12px;
		margin-top: 16px;
		border-radius: 5px;
		min-height: 50px;
		padding: 10px;
	}
	.apply-title{
		line-height: 30px;
		text-align: center;
		font-weight: bold;
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: center;
		gap: 10px;
		.apply-line {
			width: 16px;
			height: 4px;
			background-color: $theme-color;
			border-radius: 2px;
		}
	}
	.apply-action-box{
		margin-top: 16px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		min-height: 30px;
		.action-item {
			width: 90px;
			background-color: $theme-color;
			color: white;
			text-align: center;
			line-height: 30px;
			min-height: 60px;
			border-radius: 4px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 6px 4px;
			box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.2);
			.icon-image {
				height: 30px;
				width: 30px;
			}
		}
	}
	.apply-content {
		padding-top: 10px;
	}
	.city-box {
		min-height: 200px;
	}
</style>
